function ComboBox(p_ctx, p_left, p_top)
{	
	//embedded text area
	this.text_area = new TextArea();
	this.text_area.setMultiLine(false);

	this.getHasFocus =function() { return this.hasFocus? this.hasFocus : false; }
	this.setHasFocus = function(p_focus)  { this.hasFocus=p_focus; }
	this.setHasFocus(false);
	
	this.getTop = function() { return this.top; }
	this.setTop = function(p_top) { if (p_top >=0) {this.top = p_top; if (this.text_area) this.text_area.setTop(p_top);  } }
	this.setTop(p_top?p_top : 0);

	this.getLeft = function() { return this.left; }
	this.setLeft = function(p_left) { if (p_left >=0) { this.left = p_left; if (this.text_area) this.text_area.setLeft(p_left);  } }
	this.setLeft(p_left?p_left : 0);
		
	//whether this combobox has focus; boolean
	this.getHasFocus =function() { return this.has_focus? this.has_focus : (this.has_focus=false, false); }
	this.setHasFocus = function(p_focus)  { this.has_focus=p_focus; if (this.text_area) this.text_area.setHasFocus(p_focus); }
	this.setHasFocus(false);
	
	//list data; array
	this.getList = function() { if (!this.list) this.list = new Array(); return this.list; }
	this.setList = function(p_list) { this.list = p_list; }
	this.setList(new Array());
	
	//height; number; read only
	this.getHeight = function() 
	{
		if (this.list_shown)
			return (this.getList().length + 1) * this.height;
		else
			return  this.height;
	} 
	this.height = 25; //constant height of 'text box'
	if (this.text_area) this.text_area.setMinHeight(this.height);
	

	//width; number
	this.getWidth = function() { return  this.width; }
	this.setWidth = function(p_width) { if  (p_width > this.height) { this.width = p_width; if (this.text_area) this.text_area.setMinWidth(this.width-this.height); } }
	this.setWidth(70);  //initial default

	this.textVisibleWidth = function() { return this.width-this.height; } //width of visible area of text. we use this.height for the width of the drop down button

	
	//selected item index, when list is shown; number
	this.getSelectedIndex = function() { return this.selected_index; }
	this.setSelectedIndex = function (p_index)  { if (p_index >= -1 && p_index < this.list.length) this.selected_index=p_index;}
	this.setSelectedIndex(-1); //no item initially selected

	// Whether content is validated against items in list
	this.getRestrictToList = function() { return this. restrict_to_list; }
	this.setRestrictToList = function(p_restrict_to_list) { this. restrict_to_list = p_restrict_to_list; }
	this.setRestrictToList(false);

	// Item management
	this.addItem = function(p_item) { if (p_item) this.list.push(p_item); }
	this.removeItem = function(p_index) { this.list.pArrRemoveAt(p_index); }

	// Text content
	this.getText = function() { return this.text_area.getText(); }
	this.setText = function(p_text) { this.text_area.setText(p_text); }

	// Drawing context
	this.setContext = function() { this.ctx=p_ctx; if (this.text_area) this.text_area.setContext(p_ctx); }
	this.getContext = function() { return this.ctx; }
	this.setContext(p_ctx? p_ctx : null);
	
	// Background Color
	this.setBackColor = function(p_color) { this.back_color = p_color; this.text_area.setBackColor(p_color); }
	this.getBackColor=function() { return this.back_color; }
	this.setBackColor("white");

	this.setForeColor = function(p_color) { this.fore_color = p_color; this.text_area.setForeColor(p_color); }
	this.getForeColor=function() { return this.fore_color; }
	this.setForeColor("#444444");
	
	this.setSelectionColor = function(p_color) { this.selection_color = p_color; }
	this.getSelectionColor=function() { return this.selection_color; }
	this.setSelectionColor("silver");


//===============================================================

	this.getMouseListItem = function(p_y) //when list is displayed, determines the list item over which mouse cursor is positioned. We assume x coordinates is redundant
	{
		if (p_y <= this.height)
			return -1; //indicates mouse is over the 'text box' portion
		else
			for (var i=0; i<this.list.length; i++) 
				if (p_y >= (this.height * (i+1)) && p_y <= (this.height * (i+2))) 
					return i;
	}

	this.mouseOut = function() { if (this.onMouseOut) this.onMouseOut(); }
	this.mouseOver = function() { if (this.onMouseOver) this.onMouseOver(); }
	this.mouseMove = function(p_x, p_y)
	{
		if (this.list_shown) this.selected_index = this.getMouseListItem(p_y);
		if ((this.selected_index < 0) && this.text_area) if (this.text_area.mouseMove) if (p_x<this.textVisibleWidth()) this.text_area.mouseMove(p_x, p_y);
		if (this.onMouseMove) this.onMouseMove(p_x, p_y);		
	}
	this.mouseDown = function(p_x, p_y)
	{
		if (this.list_shown) this.selected_index = this.getMouseListItem(p_y);
		if (this.selected_index >= 0) 
		{
			this.text_area.text = this.list[this.selected_index].toString();
			this.list_shown = false;
			this.selected_index = -1;
		}
		else
		{
			if (p_x>this.textVisibleWidth())
				this.list_shown = true;
			else
				if (this.text_area) if (this.text_area.mouseDown) 
				{
					this.text_area.setHasFocus(true);
					this.text_area.mouseDown(p_x, p_y);	
					this.list_shown = false;			
				}
		}		
		if (this.onMouseDown) this.onMouseDown(p_x, p_y);
	}
	this.mouseUp = function(p_x, p_y)
	{
		if (this.text_area) if (this.text_area.mouseUp) if (p_x<this.textVisibleWidth()) this.text_area.mouseUp(p_x, p_y);
		if (this.onMouseUp) this.onMouseUp(p_x, p_y);
	}
	
	this.keyPress = function(key) { if (this.text_area) if (this.text_area.keyPress) this.text_area.keyPress(key); }
	this.keyDown = function(key) { if (this.text_area) if (this.text_area.keyDown) return (this.text_area.keyDown(key)); }

	this.render = function()
	{	
		this.ctx.fillStyle="#bbbbbb";
		this.ctx.fillRect(this.left+this.textVisibleWidth(), this.top, this.height, this.height);
		//this.ctx.font = this.font;
		this.ctx.textBaseline="top";
		
		if (this.list_shown)
		{
			this.ctx.strokeStyle=this.fore_color;
			for (var i=0; i<this.list.length; i++)
			{
				if (i != this.selected_index) 
					this.ctx.fillStyle=this.back_color;
				else
					this.ctx.fillStyle=this.selection_color;
				this.ctx.fillRect(this.left, this.top+(this.height * (i+1)), this.width, this.height);
				this.ctx.fillStyle=this.fore_color;
				this.ctx.fillText(this.list[i], this.left+10, this.top+(this.height * (i+1)));
				//this.ctx.strokeRect(this.left, this.top+(this.height * (i+1)), this.width, this.height);
				
			}
		}

		this.ctx.fillStyle = 'gray';				
		this.ctx.beginPath();		
		this.ctx.moveTo(this.left+this.textVisibleWidth()+5, this.top + 5);
		this.ctx.lineTo(this.left+this.width-5, this.top + 5);
		this.ctx.lineTo(this.left+this.textVisibleWidth()+this.height/2, this.top + this.height - 5);
		this.ctx.closePath();
		this.ctx.fill();
		
		if (this.text_area)
		{
			this.text_area.render(0, this.textVisibleWidth(), 0, this.height);	
		}

		this.ctx.strokeStyle="gray";
		this.ctx.strokeRect(this.left, this.top, this.getWidth(), this.getHeight());
	}
	this.render();
}